<div class="modal" ng-controller="ModelsIncludedPopupCtrl">
  <div class="modal-dialog modal-wide">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">&times;</button>
        <h2>
          {{ 'APP.POPUP.INCLUDE-MODELS-TITLE' | translate }}
        </h2>
      </div>

      <div class="modal-body modal-body-with-overflow">
        <div class="tabs-wrapper">
          <div tab-control="tabs" active-tab="popup.activeTab"></div>

          <div class="item-wrapper clearfix" ng-show="popup.activeTab == 'bpmn'">
            <div class="item fadein" ng-repeat="model in popup.models.data">
              <div
                class="item-box"
                ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}"
                ng-click="selectModel(model); $event.stopPropagation();"
              >
                <span class="badge">v{{ model.version }}</span>
                <div class="btn-group pull-right">
                  <button
                    type="button"
                    ng-show="isModelSelected(model)"
                    class="btn btn-default"
                    title="{{ 'PROCESS.ACTION.DETAILS' | translate }}"
                  >
                    <i class="glyphicon glyphicon-plus-sign"></i>
                  </button>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{ model.name }}">
                    {{ model.name }}
                  </h3>
                  <div class="basic-details truncate">
                    <span><i class="glyphicon glyphicon-user"></i> {{ model.createdBy }}</span>
                    <span title="{{ model.lastUpdated | dateformat: 'LLLL' }}"
                      ><i class="glyphicon glyphicon-pencil"></i> {{ model.lastUpdated | dateformat }}</span
                    >
                  </div>
                  <p>{{ model.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="item-wrapper clearfix" ng-show="popup.activeTab == 'cmmn'">
            <div class="item fadein" ng-repeat="cmmnModel in popup.cmmnModels.data">
              <div
                class="item-box"
                ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(cmmnModel.id) + '\')'}"
                ng-click="selectCmmnModel(cmmnModel); $event.stopPropagation();"
              >
                <span class="badge">v{{ cmmnModel.version }}</span>
                <div class="btn-group pull-right">
                  <button
                    type="button"
                    ng-show="isCmmnModelSelected(cmmnModel)"
                    class="btn btn-default"
                    title="{{ 'PROCESS.ACTION.DETAILS' | translate }}"
                  >
                    <i class="glyphicon glyphicon-plus-sign"></i>
                  </button>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{ cmmnModel.name }}">
                    {{ cmmnModel.name }}
                  </h3>
                  <div class="basic-details truncate">
                    <span><i class="glyphicon glyphicon-user"></i> {{ cmmnModel.createdBy }}</span>
                    <span title="{{ cmmnModel.lastUpdated | dateformat: 'LLLL' }}"
                      ><i class="glyphicon glyphicon-pencil"></i> {{ cmmnModel.lastUpdated | dateformat }}</span
                    >
                  </div>
                  <p>{{ cmmnModel.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="pull-right">
            <button type="button" class="btn btn-default" ng-click="close()" ng-disabled="popup.loading">
              {{ 'GENERAL.ACTION.CLOSE' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
